<!--
  因tabs属性并不包含于options属性之中，故只能跟其他options属性之内的属性值合并设置，此处选择与customClass合并！！
-->

<template>
  <div>
    <el-form-item label="折叠项设置"></el-form-item>
    <el-form-item label-width="0" class="panes-setting">
      <draggable
        tag="ul"
        :list="selectedWidget.tabs"
        v-bind="{
          group: 'panesGroup',
          ghostClass: 'ghost',
          handle: '.drag-option',
        }"
      >
        <li
          v-for="(tpItem, tpIdx) in optionModel.tabs"
          :key="tpIdx"
          class="col-item"
        >
          <el-input
            type="text"
            v-model="tpItem.title"
            style="width: 155px"
          ></el-input>
          <i class="el-icon-rank drag-option"></i>
          <el-button
            circle
            plain
            size="mini"
            type="danger"
            @click="deleteTabPane(selectedWidget, tpIdx)"
            icon="el-icon-minus"
            class="col-delete-button"
          ></el-button>
        </li>
        <div>
          <el-button type="text" @click="addTabPane(selectedWidget)"
            >新增折叠项</el-button
          >
        </div>
      </draggable>
    </el-form-item>
     <el-form-item label="是否手风琴模式">
            <el-switch v-model="optionModel.collapse.accordion"></el-switch>
    </el-form-item>
  </div>
</template>

<script>
import i18n from "@/utils/i18n";
import Draggable from "vuedraggable";
import { deepClone } from "@/utils/util";

export default {
  name: "collapse-editor",
  componentName: "PropertyEditor",
  mixins: [i18n],
  components: {
    Draggable,
  },
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      cssClassList: [],
    };
  },
  computed: {
    optionModel() {
      return this.selectedWidget.options;
    },
  },
  created() {
    this.cssClassList = deepClone(this.designer.getCssClassList());
    //监听表单css代码改动事件并重新加载！
    this.designer.handleEvent("form-css-updated", (cssClassList) => {
      this.cssClassList = cssClassList;
    });
  },
  methods: {
    onTabPaneActiveChange(evt, tpItem) {},

    addTabPane(curTabs) {
      this.designer.addTabCollapse(curTabs);
      this.designer.emitHistoryChange();
    },

    deleteTabPane(curTabs, tpIdx) {
      if (curTabs.tabs.length === 1) {
        this.$message.info(this.i18nt("designer.hint.lastPaneCannotBeDeleted"));
        return;
      }
      this.designer.deleteTabPaneOfCollapse(curTabs, tpIdx);
      this.designer.emitHistoryChange();
    },
  },
};
</script>

<style lang="scss" scoped>
li.col-item {
  list-style: none;

  span.col-span-title {
    display: inline-block;
    font-size: 13px;
    width: 120px;
  }

  .col-delete-button {
    margin-left: 6px;
  }
}

.panes-setting {
  ul {
    padding-inline-start: 0;
    padding-left: 0; /* 重置IE11默认样式 */
    margin: 0;
  }

  .drag-option {
    cursor: move;
  }

  li.ghost {
    background: #fff;
    border: 2px dotted $--color-primary;
  }
}
</style>
